<template>
  <div>
    <div class="title">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="点位搜索">
          <el-input v-model="formInline.search" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="区域搜索：">
          <el-input v-model="formInline.search" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-button type="warning" @click="add">+新建</el-button>
    <template>
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          type="index"
          width="120"
        >
          <template v-slot="{ $index }">
            <span>{{
              (regionlist.pageIndex - 1) * regionlist.pageSize + $index + 1
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="点位名称"
          width="180px"
        />
        <el-table-column
          prop="region.name"
          label="所在区域"
          width="220px"
        />
        <el-table-column
          prop="businessType.name"
          label="商圈类型"
          width="170px"
        />
        <el-table-column
          prop="ownerName"
          label="合作商"
        />
        <el-table-column
          prop="addr"
          label="详细地址"
        />
        <el-table-column label="操作">
          <template>
            <el-button type="text" @click="add">查看详情</el-button>
            <el-button type="text">修改</el-button>
            <el-button type="text" style="color:red">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="footer" style="margin-top:20px">
      <span class="footerspan">共{{ totalCount }}条记录 第{{ regionlist.pageIndex }}/{{ totalPage }}页</span>
      <el-row type="flex" justify="end">
        <el-col :span="6">
          <el-button type="primary" plain @click="beforepage">上一页</el-button>
          <el-button type="primary" plain @click="next">下一页</el-button>
        </el-col>
      </el-row>
    </div>
    <el-dialog :visible.sync="isShowaddDialog" title="新增点位">
      <el-form ref="ruleForm" :model="addForm" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="点位名称:" prop="regionName" style="width:680px">
          <el-input v-model="addForm.regionName" autocomplete="off" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="所有区域:" prop="remark">
          <el-select v-model="addForm.region" placeholder="请选择" style="width:580px">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属商圈:" prop="remark">
          <el-select v-model="addForm.region" placeholder="请选择" style="width:580px">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="归属合作商:" prop="remark">
          <el-select v-model="addForm.region" placeholder="请选择" style="width:580px">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址:" prop="remark">
          <el-select v-model="addForm.region" placeholder="请选择" style="width:580px">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item prop="regionName" style="width:680px">
          <el-input v-model="addForm.regionName" type="textarea" rows="3" autocomplete="off" placeholder="请输入详细地址" />
        </el-form-item>
        <el-form-item class="btn">
          <el-button @click="isShowaddDialog=false">取消</el-button>
          <el-button type="warning" @click="submitForm">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import { getpointList, addregion } from '@/api/dianwei'
export default {
  data() {
    return {
      isShowdialog: false,
      isShowaddDialog: false,
      totalCount: '',
      totalPage: '',
      addForm: {},
      ruleForm: {
        regionName: '',
        remark: ''
      },
      tableData: [],
      total: '',
      formInline: {
        search: ''
      },
      regionlist: {
        pageIndex: 1,
        pageSize: 10
      },

      rules: {
        regionName: [{ required: true, message: '区域名称不能为空', trigger: 'blur' }],
        remark: [{ required: true, message: '备注说明不能为空', trigger: 'blur' }]
      }
    }
  },
  async created() {
    this.getpointList()
  },
  methods: {
    async getpointList() {
      const res = await getpointList(this.regionlist)
      console.log(res)
      this.totalCount = res.totalCount
      this.totalPage = res.totalPage
      this.tableData = res.currentPageRecords
    },
    onSubmit() {
      console.log('点击了查询')
    },
    add() {
      // this.isShowdialog = true
      this.isShowaddDialog = true
    },
    async submitForm() {
      const res = await addregion()
      console.log(res)
    },
    close() {
      this.$refs.ruleForm.resetFields()
      this.isShowdialog = false
    },
    beforepage() {
      if (this.regionlist.pageIndex !== 1) {
        this.regionlist.pageIndex--
        this.getpointList()
      } else {
        this.$message.warning('已经是第一页')
      }
    },
    next() {
      this.regionlist.pageIndex++
      this.getpointList()
    }
  }
}
</script>

<style lang='scss' scoped>
.title{
  background-color: white;
  height: 100px;
  margin-left: 20px;
  display: flex;
  .el-input{
    width: 230px !important;
  }
}
.footerspan{
  font-size: 16px!important;
    color: #dbdfe5!important;
}
.el-button{
  margin-right: 30px;
  margin-bottom: 20px;
}
.btn{
margin-left: 200px;
}
</style>
